<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <h1>axios响应拦截器</h1>
  <input type="text">
  <button type="submit">发送请求</button>
  <script>
    const oBnt = document.querySelector('button')
    const oIpt = document.querySelector('input')

    //创建一个axios的实例并配置
    const myAxios = axios.create({
      baseURL: '/',
      timeout: 10000,
      headers: {}
    })
    //响应拦截器
    myAxios.interceptors.response.use((res) => {
      //响应拦截器可以拿到响应回的结果
      console.log('res',res);
      //拿到想要的响应结果返回出去 这样就可以把我们想要的结果直接返回出去，避免一些麻烦
      return res
    }, (e) => {
      //如果有报错 快速返回一个失败的promise实列 值为错误信息
      //Catch则捕获
      return Promise.reject(e.message)
      
    })
    //绑定事件
    oBnt.onclick =async function () {
      
      try {
        const re = await myAxios.get('/user', {
         //查询字符串
          params: {
            userId: '001'
          }
        })
        console.log('re',re.data);
      } catch (e) {
        
        console.log(e);
      }
    }
  </script>
</body>

</html>